<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="任务清单作业.css" rel="stylesheet" />
  </head>
  <body>
    <div id="myDIV" class="header">
      <h2>任务清单</h2>
      <input type="text" id="myInput" />
      <span id="addButton" class="addBtn">添加</span>
    </div>
    <ul id="muUL">
      <li>起床</li>
      <li>洗漱</li>
      <li>整理床铺</li>
      <li>早读</li>
      <li>早餐</li>
      <li>专业课</li>
      <li>午饭</li>
      <li>午休</li>
      <li>起床</li>
      <li>洗漱</li>
      <li>阅读课</li>
      <li>专业课</li>
      <li>放学</li>
      <li>晚自习</li>
    </ul>
    <script>
      ;(function () {
        let i /*index*/

        /*为每个li后面加上关闭按钮*/
        function closeBtn() {
          let myNodelist = document.getElementsByTagName('li')
          for (i = 0; i < myNodelist.length; i++) {
            let span = document.createElement('span')
            let txt = document.createTextNode('\u00D7') /*unicode代码*/
            span.className = 'close'
            span.appendChild(txt)
            myNodelist[i].appendChild(span)
          }
        }

        /*点击关闭按钮，隐藏当前li*/
        function closeElement() {
          let close = document.getElementsByClassName('close')
          for (i = 0; i < close.length; i++) {
            close[i].onclick = function () {
              let div = this.parentElement /*关闭按钮的父元素 - li*/
              div.style.display = 'none'
            }
          }
        }

        /*点击li的时候，加上.checked，再点击则取消*/
        function ifChecked() {
          let list = document.querySelector('ul')
          list.onclick = function (ev) {
            if (ev.target.tagName === 'LI') {
              ev.target.classList.toggle('checked')
            }
          }
        }

        /*点击添加时，创建一个新的ul*/
        function newElement() {
          let li = document.createElement('li')
          let inputValue = document.querySelector('myInput').value
          let t = document.createTextNode(inputValue)
          li.appendChild(t)
          if (inputValue === '') {
            alert('请先输入一个具体任务。')
          } else {
            document.querySelector('myUL').appendChild(li)
          }
          document.querySelector('myInput').value = '' /*清空输入*/
        }

        /*初始化list*/
        function initList() {
          closeBtn()
          closeElement()
          ifChecked()
        }

        /*初始化*/
        function init() {
          var addButton = document.querySelector('addButton')
          initList()

          /*添加按钮点击时执行*/
          addButton.onclick = function () {
            newElement()
            initList()
          }

          /*按回车时亦执行*/
          document.onkeydown = function (event) {
            if (event.keyCode == 13) {
              newElement()
              initList()
            }
          }
        }

        init()
      })()
    </script>
  </body>
</html>
